<template>
	<div class="system-role_list-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<el-table size="default" :data="state.dataList" style="width: 100%">

				<el-table-column label="ID" prop="id" width="150"></el-table-column>


				<el-table-column align="center" prop="configCode" label="配置编码" width="200">
					<template #default="scope">
						{{ scope.row.configCode || "-" }}
					</template>
				</el-table-column>


				<el-table-column align="center" prop="configName" label="配置名称" width="200">
					<template #default="scope">
						{{ scope.row.configName || "-" }}
					</template>
				</el-table-column>


				<el-table-column align="center" prop="configType" label="类型" width="140">
					<template #default="scope">
						<el-tag :type="scope.row.configType === 20 ? 'success' : 'warning'" effect="dark">{{
							scope.row.configType === 20 ? '公开' : '私有'
						}}</el-tag>
					</template>
				</el-table-column>


				<el-table-column align="center" prop="configValue" label="值" width="200">
					<template #default="scope">
						{{ scope.row.configValue || "-" }}
					</template>
				</el-table-column>


				<el-table-column align="center" prop="expand1" label="拓展字段1" width="200">
					<template #default="scope">
						{{ scope.row.expand1 || "-" }}
					</template>
				</el-table-column>

				<el-table-column align="center" prop="expand2" label="拓展字段2" width="200">
					<template #default="scope">
						{{ scope.row.expand2 || "-" }}
					</template>
				</el-table-column>

				<el-table-column align="center" prop="expand3" label="拓展字段3" width="200">
					<template #default="scope">
						{{ scope.row.expand3 || "-" }}
					</template>
				</el-table-column>

				<el-table-column align="center" prop="createTime" label="创建时间">
					<template #default="scope">
						<span>{{ formatDate(new Date(scope.row.createTime), "YYYY-mm-dd HH:MM:SS") }}</span>
					</template>
				</el-table-column>






				<el-table-column align="center" label="操作" width="200">
					<template #default="scope">
						<el-button type="primary" size="default" @click="handlerEdit(scope.$index, scope.row)">
							编辑
						</el-button>
					</template>
				</el-table-column>

			</el-table>
			<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
				:pager-count="5" :page-sizes="[15, 30, 45]" v-model:current-page="state.page" background
				v-model:page-size="state.limit" layout="total, sizes, prev, pager, next, jumper" :total="state.total">
			</el-pagination>
		</el-card>

		<editdialog ref="editdialogRef" @refresh="refresh" />

	</div>
</template>

<script setup lang="ts" name="systemMenu">


import { formatDate } from '/@/utils/formatTime';
import { onMounted, reactive, defineAsyncComponent, ref } from 'vue';

import { useCommonApi } from '/@/api/common/index';




const editdialog = defineAsyncComponent(() => import('./editdialog.vue'));
const editdialogRef = ref();

const state = reactive({
	page: 1,
	limit: 15,
	total: 0,
	dataList: [] as any
});




const handlerEdit = (index: any, row: any) => {
	editdialogRef.value.openDialog("edit", row);
}

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.limit = val;
	getParamConfig();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.page = val;
	getParamConfig();
};





const refresh = () => {
	getParamConfig();
}


const getParamConfig = async () => {
	let vo = {
		page: state.page,
		limit: state.limit
	} as any;
	let tempList = await useCommonApi().getParamConfig(vo);
	state.dataList = tempList.list;
	state.total = tempList.total;
}



// 页面加载时
onMounted(() => {
	getParamConfig();
});



</script>




<style scoped lang="scss">
.el-form .el-form-item:last-of-type {
	margin-bottom: 22px !important;
}

.bar_tools {
	display: flex;
	flex-direction: row-reverse;
	margin-bottom: 10px;
}


.system-role_list-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;

		.el-table {
			flex: 1;
		}
	}
}

.bar_btn_div {
	display: flex;
	padding: 20px;
	border: 1px solid #ebeef5;
	align-items: center;
	justify-content: space-between;
	border-radius: 5px 5px 0px 0px;

	.title_div {
		display: flex;
		font-size: 16px;

		&>div {
			margin-right: 10px;
		}
	}
}

.search_div {
	border: 1px solid #ebeef5;
	border-top: 0px;
	border-radius: 0px 0px 5px 5px;
	padding: 20px;
	padding-bottom: 0px;
}
</style>
